<!--  -->
<template>
  <div class>
    <h2>ElementUI讲解</h2>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
      <el-button type="primary" icon="el-icon-eleme" circle></el-button>
    </el-row>
    <div>
      <el-link href="https://www.baidu.com" target="_blank">百度</el-link>
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
    </div>

    <div>
      <el-radio v-model="radio" label="1">备选项</el-radio>
      <el-radio v-model="radio" label="2">备选项</el-radio>
    </div>
    <div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="上海"></el-checkbox>
        <el-checkbox label="杭州"></el-checkbox>
        <el-checkbox label="郑州"></el-checkbox>
        <el-checkbox label="好谷"></el-checkbox>
        <el-checkbox label="回家" disabled></el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
    </div>
    <div>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <h2>{{value}}</h2>
    </div>
    <div class="block">
      <el-cascader v-model="value" :options="productLists" @change="handleChange"></el-cascader>
    </div>
    <div>
      <el-switch v-model="value2" active-color="#f55" inactive-color="#666"></el-switch>
    </div>
    <div>
      <el-rate v-model="value3" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
    </div>

    <div>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
    <div>
      <el-progress type="circle" :percentage="0"></el-progress>
      <el-progress type="circle" :percentage="25"></el-progress>
      <el-progress type="circle" :percentage="100" status="success"></el-progress>
      <el-progress type="circle" :percentage="70" status="warning"></el-progress>
      <el-progress type="circle" :percentage="50" status="exception"></el-progress>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      radio: "2",
      checkList: ["上海", "杭州", "郑州"],
      input: "123",
      value2: true,
      value3: 3.5,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      options: [
        {
          value: "好谷",
          label: "好谷"
        },
        {
          value: "二哥",
          label: "二哥"
        },
        {
          value: "you",
          label: "you"
        },
        {
          value: "me",
          label: "me"
        },
        {
          value: "北京烤鸭",
          label: "北京烤鸭"
        }
      ],
      value: "",
      productLists: [
        {
          id: 1,
          value: "男装女装",
          label: "男装女装",
          children: [
            {
              id: 1001,
              value: "男装",
              label: "男装",
              children: [
                {
                  id: 10001,
                  value: "花花公子",
                  label: "花花公子"
                },
                {
                  id: 10002,
                  value: "海澜之家",
                  label: "海澜之家"
                }
              ]
            },
            {
              id: 1002,
              value: "女装",
              label: "女装",
              children: [
                {
                  id: 20001,
                  value: "花花",
                  label: "花花"
                },
                {
                  id: 20002,
                  value: "之家",
                  label: "之家"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange() {}
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>